<template>
  <div>


<div>
  <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
    <el-submenu index="2">
      <template slot="title">房间管理</template>
      <el-menu-item index="2-1" @click="addRoom">添加房间</el-menu-item>
      <el-menu-item index="2-2" @click="delRoom">删除房间</el-menu-item>
      <el-menu-item index="2-3" @click="addRoom">修改房间</el-menu-item>
    </el-submenu>
    <el-submenu index="3">
      <template slot="title">员工管理</template>
      <el-menu-item index="3-1" @click="addEms">添加员工</el-menu-item>
      <el-menu-item index="3-2" @click="toLeave()">强制员工下线</el-menu-item>
      <el-menu-item index="3-3" @click="addEms">修改员工</el-menu-item>
      <el-menu-item index="3-4" @click="showAll()">查看所有在线员工</el-menu-item>
    </el-submenu>
    <el-menu-item index="1" @click="toEms">进入员工页面</el-menu-item>
    
  </el-menu>
</div>
    <br>
    <br>
    <div v-if="isDel">
      <del-ems-or-room :is-room="isRoom"></del-ems-or-room>
    </div>
    <div v-if="isAddRoom">
      <up-or-add-room></up-or-add-room>
    </div>
    <up-or-add-ems :is-show="isEms"></up-or-add-ems>
<div v-if="isShowWorking">
  <show-all-ems></show-all-ems>
</div>
  </div>
</template>

<script>
import DelEmsOrRoom from "@/views/employee/manger/DelEmsOrRoom";
import UpOrAddEms from "@/views/employee/manger/UpOrAddEms";
import UpOrAddRoom from "@/views/employee/manger/UpOrAddRoom";
import ShowAllEms from "@/views/employee/manger/ShowAllEms";

export default {
  data() {
    return {
      activeIndex2: '1',
      isRoom:true,
      isDel:false,
      isEms:false,
      isAddRoom:false,
      isShowWorking:false

    };
  },
 components:{
   DelEmsOrRoom,
   UpOrAddEms,
   UpOrAddRoom,
   ShowAllEms
 }
,
  methods: {
    
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    toEms(){
      this.$router.push('/')
    },
    addRoom(){
      this. isShowWorking=false;
      this.isAddRoom=true;
      this.isEms=false;
      this.isDel=false;
      this.isRoom=false;
    },
    delRoom() {
      this. isShowWorking=false;
      this.isAddRoom=false;
      this.isEms=false;
      this.isDel=true;
      this.isRoom=true;
    },
    toLeave(){
      this. isShowWorking=false;
      this.isAddRoom=false;
      this.isEms=false;
      this.isDel=true;
      this.isRoom=false;
    },
    addEms(){
      this. isShowWorking=false;
      this.isAddRoom=false;
      this.isEms=true;
      this.isDel=false;
    },
    showAll(){
      this.isAddRoom=false;
      this.isEms=false;
      this.isDel=false;
      this. isShowWorking=true;
    }

  }
}
</script>
<style scoped>

</style>